<template>
  <div class="NewsInfo">
    <!--    新闻内容-->
    <van-cell-group class="newsItem">
      <van-cell class="title" :title="newsInfo.zhaiyao" :value="'阅读量:'+newsInfo.click"/>
      <van-cell class="content" :value="newsInfo.content"/>
    </van-cell-group>
    <!--    评论区域-->
    <remark :newsId="newsId"></remark>
  </div>
</template>

<script>
import Remark from 'components/Remark'

export default {
  name: 'NewsInfo',
  props: {
    newsId: {
      type: String
    }
  },
  data: () => ({
    newsInfo: {}
  }),
  components: {
    Remark
  },
  created () {
    this.getNewsInfo()
  },
  methods: {
    async getNewsInfo () {
      const { message } = await this.$http.getNewsInfo(this.newsId)
      this.newsInfo = message
    }
  }
}
</script>

<style lang="scss" scoped>
  .NewsInfo {
    font-size: 20px;

    .newsItem {
      margin-top: 20px;
      padding: 20px 0;

      .title {
        font-size: 16px;

        .van-cell__title {
          font-size: 22px;
          font-weight: bold;
        }
      }

      .content {
        .van-cell__value {
          font-size: 18px;
          font-weight: normal;
          line-height: 37px;
          text-indent: 32px;
          color: #333333;
        }
      }

      .van-cell::after {
        border: none;
      }
    }
  }
</style>
